import type { App } from 'vue';
/**
 * 元素尺寸变化指令
 * @directive 单个权限验证（v-resize="xxx"）
 */
export function resizeDirective(app: App) {
    // 单个权限验证（v-auth="xxx"）
    app.directive('resize', {
        mounted(el, binding) {
            // el为绑定的元素，binding为绑定给指令的对象
            // console.log(el, '绑定', binding);
            let width = '', height = '';

            function isResize() {
                const style = document.defaultView.getComputedStyle(el);
                if (width !== style.width || height !== style.height) {
                    // 关键(这传入的是函数,所以执行此函数)
                    binding.value({width: style.width, height: style.height});
                }
                width = style.width;
                height = style.height;
            }

            el.__vueSetInterval__ = setInterval(isResize, 300);
        },
        unmounted(el) {
            // console.log(el, '解绑');
            clearInterval(el.__vueSetInterval__);
        }
    });
}


